import 'package:flutter/material.dart';
import 'package:get/get.dart';

import 'index.dart';
import '../../../common/utils/level_util.dart';
import '../../../common/widgets/index.dart';
import '../../../common/values/images.dart';

/// 🖼️ 活动详情页多图轮播组件（带圆点指示器）
class _ActivityImageSwiper extends StatefulWidget {
  final List<String> images;
  
  const _ActivityImageSwiper({required this.images});
  
  @override
  State<_ActivityImageSwiper> createState() => _ActivityImageSwiperState();
}

class _ActivityImageSwiperState extends State<_ActivityImageSwiper> {
  late PageController _pageController;
  int _currentImageIndex = 0;
  
  @override
  void initState() {
    super.initState();
    _pageController = PageController();
  }
  
  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }
  
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      margin: const EdgeInsets.symmetric(horizontal: 10),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(12),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.06),
            blurRadius: 6,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(12),
        child: Stack(
          children: [
            // 图片轮播
            PageView.builder(
              controller: _pageController,
              onPageChanged: (index) {
                setState(() {
                  _currentImageIndex = index;
                });
              },
              itemCount: widget.images.length,
              itemBuilder: (context, index) {
                return CachedImage(
                  imageUrl: widget.images[index],
                  width: double.infinity,
                  height: double.infinity,
                  fit: BoxFit.cover,
                  memCacheWidth: 1080,
                  memCacheHeight: 1920,
                  placeholderColor: Colors.grey[200],
                  showPlaceholder: true,
                );
              },
            ),
            
            // 📍 圆点指示器（右下角）
            Positioned(
              bottom: 12,
              right: 12,
              child: Container(
                padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
                decoration: BoxDecoration(
                  color: Colors.black.withOpacity(0.6),
                  borderRadius: BorderRadius.circular(20),
                ),
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    // 当前页码
                    Text(
                      '${_currentImageIndex + 1}',
                      style: const TextStyle(
                        color: Colors.white,
                        fontSize: 12,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                    const Text(
                      ' / ',
                      style: TextStyle(
                        color: Colors.white70,
                        fontSize: 12,
                      ),
                    ),
                    // 总数
                    Text(
                      '${widget.images.length}',
                      style: const TextStyle(
                        color: Colors.white70,
                        fontSize: 12,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                  ],
                ),
              ),
            ),
            
            // 📍 圆点指示器（底部居中）
            Positioned(
              bottom: 12,
              left: 0,
              right: 0,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: List.generate(widget.images.length, (index) {
                  final isActive = index == _currentImageIndex;
                  return Container(
                    margin: const EdgeInsets.symmetric(horizontal: 4),
                    width: isActive ? 8 : 6,
                    height: isActive ? 8 : 6,
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      color: isActive 
                          ? Colors.white 
                          : Colors.white.withOpacity(0.4),
                      boxShadow: isActive
                          ? [
                              BoxShadow(
                                color: Colors.white.withOpacity(0.5),
                                blurRadius: 4,
                                offset: const Offset(0, 2),
                              ),
                            ]
                          : null,
                    ),
                  );
                }),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class ActivityDetialPage extends GetView<ActivityDetialController> {
  const ActivityDetialPage({super.key});

  // 主视图
  Widget _buildView() {
    // 加载状态
    if (controller.isLoading.value) {
    return const Center(
        child: CircularProgressIndicator(),
      );
    }
    
    // 活动数据为空
    if (controller.activity == null) {
      return Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Icon(
              Icons.error_outline,
              size: 64,
              color: Colors.grey,
            ),
            const SizedBox(height: 16),
            const Text(
              '活动信息加载失败',
              style: TextStyle(
                fontSize: 16,
                color: Colors.grey,
              ),
            ),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: controller.goBack,
              child: const Text('返回'),
            ),
          ],
        ),
      );
    }
    
    final activity = controller.activity!;
    
    return SingleChildScrollView(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 🔥 发布者信息卡片
          _buildPublisherCard(activity),
          
          // 🔥 活动图片轮播
          _buildImageCarousel(activity),
          
          // 🔥 活动标题
          _buildActivityHeader(activity),
          
          // 🔥 地点和时间信息
          _buildLocationRow(activity),
          
          // 🔥 活动详情
          _buildDetailSection(activity),
          
          // 🔥 详细描述
          _buildDescriptionSection(activity),
          
          const SizedBox(height: 70), // 为底部按钮留空间
        ],
      ),
    );
  }

  // 🔥 构建发布者信息卡片
  Widget _buildPublisherCard(activity) {
    // 🔥 使用 LevelUtil 计算等级
    final publisherPoints = activity.publisherPoints ?? 0;
    final levelName = LevelUtil.getLevelNameFromPoints(publisherPoints);
    
    return Container(
      margin: const EdgeInsets.fromLTRB(10, 10, 10, 6),
      padding: const EdgeInsets.all(10.0),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.04),
            blurRadius: 6,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      child: Row(
        children: [
          // 头像 - 带阴影和边框（点击跳转到发布者主页）
          GestureDetector(
            onTap: () => controller.onPublisherAvatarTap(),
            child: Container(
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                boxShadow: [
                  BoxShadow(
                    color: const Color(0xFFD84545).withOpacity(0.3),
                    blurRadius: 8,
                    offset: const Offset(0, 2),
                  ),
                ],
              ),
              // 🖼️ 使用缓存头像组件
              child: CachedAvatar(
                avatarUrl: activity.publisherAvatar ?? '',
                size: 44,
              ),
            ),
          ),
          const SizedBox(width: 10),
          // 用户信息
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // 昵称和性别
                Row(
                  children: [
                    Flexible(
                      child: Text(
                        activity.publisherNickname ?? '未知用户',
                        style: const TextStyle(
                          fontSize: 14,
                          fontWeight: FontWeight.w600,
                          color: Color(0xFF333333),
                        ),
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                      ),
                    ),
                    const SizedBox(width: 4),
                    // 性别标签
                    Container(
                      width: 16,
                      height: 16,
                      decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        gradient: LinearGradient(
                          colors: activity.publisherGender == '女'
                              ? [const Color(0xFFFF6B9D), const Color(0xFFC94B84)]
                              : [const Color(0xFF4FC3F7), const Color(0xFF29B6F6)],
                        ),
                        boxShadow: [
                          BoxShadow(
                            color: (activity.publisherGender == '女'
                                ? const Color(0xFFFF6B9D)
                                : const Color(0xFF4FC3F7)).withOpacity(0.3),
                            blurRadius: 4,
                            offset: const Offset(0, 2),
                          ),
                        ],
                      ),
                      child: Center(
                        child: Text(
                          activity.publisherGender == '女' ? '♀' : '♂',
                          style: const TextStyle(
                            color: Colors.white,
                            fontSize: 10,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
                const SizedBox(height: 4),
                // 🔥 等级标签 - 独立显示在昵称下方
                Container(
                  padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
                  decoration: BoxDecoration(
                    gradient: const LinearGradient(
                      colors: [Color(0xFFFF6B6B), Color(0xFFD84545)],
                    ),
                    borderRadius: BorderRadius.circular(10),
                  ),
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      const Icon(
                        Icons.stars_rounded,
                        color: Colors.white,
                        size: 10,
                      ),
                      const SizedBox(width: 2),
                      Text(
                        levelName,
                        style: const TextStyle(
                          color: Colors.white,
                          fontSize: 10,
                          fontWeight: FontWeight.w600,
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
          
          // 🔥 加好友按钮（只在非好友且非自己时显示）
          Obx(() {
            final isMyFriend = controller.isPublisherMyFriend;
            final isSending = controller.isSendingFriendRequest.value;
            
            // 如果已经是好友或者是自己，不显示按钮
            if (isMyFriend) {
              return const SizedBox.shrink();
            }
            
            return Container(
              height: 28,
              decoration: BoxDecoration(
                gradient: const LinearGradient(
                  colors: [Color(0xFFFF6B6B), Color(0xFFD84545)],
                ),
                borderRadius: BorderRadius.circular(14),
                boxShadow: [
                  BoxShadow(
                    color: const Color(0xFFD84545).withOpacity(0.3),
                    blurRadius: 6,
                    offset: const Offset(0, 2),
                  ),
                ],
              ),
              child: ElevatedButton(
                onPressed: isSending ? null : controller.sendFriendRequest,
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.transparent,
                  foregroundColor: Colors.white,
                  shadowColor: Colors.transparent,
                  elevation: 0,
                  padding: const EdgeInsets.symmetric(horizontal: 12),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(14),
                  ),
                ),
                child: isSending
                    ? const SizedBox(
                        height: 14,
                        width: 14,
                        child: CircularProgressIndicator(
                          strokeWidth: 2,
                          valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
                        ),
                      )
                    : Row(
                        mainAxisSize: MainAxisSize.min,
                        children: const [
                          Icon(Icons.person_add_rounded, size: 14),
                          SizedBox(width: 4),
                          Text(
                            '加好友',
                            style: TextStyle(
                              fontSize: 12,
                              fontWeight: FontWeight.w600,
                            ),
                          ),
                        ],
                      ),
              ),
            );
          }),
        ],
      ),
    );
  }

  // 🔥 构建图片轮播
  Widget _buildImageCarousel(activity) {
    final images = activity.activityImages ?? [];
    
    if (images.isEmpty) {
      return Container(
        height: 300,
        margin: const EdgeInsets.symmetric(horizontal: 16),
        decoration: BoxDecoration(
          color: Colors.grey[100],
          borderRadius: BorderRadius.circular(16),
        ),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(
                Icons.image_outlined,
                size: 64,
                color: Colors.grey[400],
              ),
              const SizedBox(height: 8),
              Text(
                '暂无图片',
                style: TextStyle(
                  fontSize: 14,
                  color: Colors.grey[600],
                ),
              ),
            ],
          ),
        ),
      );
    }
    
    // 🔥 单张图片直接显示
    if (images.length == 1) {
      return Container(
        height: 200,
        margin: const EdgeInsets.symmetric(horizontal: 10),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(12),
          boxShadow: [
            BoxShadow(
              color: Colors.black.withOpacity(0.06),
              blurRadius: 6,
              offset: const Offset(0, 2),
            ),
          ],
        ),
        child: ClipRRect(
          borderRadius: BorderRadius.circular(12),
          child: CachedImage(
            imageUrl: images[0],
            width: double.infinity,
            height: double.infinity,
            fit: BoxFit.cover,
            memCacheWidth: 1080,
            memCacheHeight: 1920,
            placeholderColor: Colors.grey[200],
            showPlaceholder: true,
          ),
        ),
      );
    }
    
    // 🔥 多张图片使用轮播组件（带圆点指示器）
    return _ActivityImageSwiper(images: images);
  }

  // 🔥 构建活动标题
  Widget _buildActivityHeader(activity) {
    return Container(
      margin: const EdgeInsets.fromLTRB(10, 6, 10, 0),
      padding: const EdgeInsets.all(12.0),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.04),
            blurRadius: 6,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      child: Row(
        children: [
          Container(
            width: 3,
            height: 18,
            decoration: BoxDecoration(
              gradient: const LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: [Color(0xFFFF6B6B), Color(0xFFD84545)],
              ),
              borderRadius: BorderRadius.circular(2),
            ),
          ),
          const SizedBox(width: 8),
          Expanded(
            child: Text(
              activity.activityTitle,
              style: const TextStyle(
                fontSize: 17,
                fontWeight: FontWeight.bold,
                color: Color(0xFF333333),
                height: 1.2,
              ),
            ),
          ),
        ],
      ),
    );
  }

  // 🔥 构建地点和时间信息卡片
  Widget _buildLocationRow(activity) {
    // 🔥 解析时间范围并格式化
    final startTime = _formatDateTime(activity.activityPublishTime);
    String endTime = startTime;
    
    if (activity.extraData != null) {
      final extraDataMap = activity.extraData as Map<String, dynamic>?;
      if (extraDataMap != null && extraDataMap['activityEndTime'] != null) {
        endTime = _formatDateTime(extraDataMap['activityEndTime'].toString());
      }
    }
    
    return Container(
      margin: const EdgeInsets.fromLTRB(10, 6, 10, 0),
      padding: const EdgeInsets.all(10.0),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.04),
            blurRadius: 6,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      child: Column(
        children: [
          // 🔥 地点信息 - 实名认证后可见和可点击
          Obx(() => _buildLocationInfoItem(activity)),
          const SizedBox(height: 6),
          Divider(color: Colors.grey[200], height: 1),
          const SizedBox(height: 6),
          // 时间信息 - 单行显示
          _buildInfoItem(
            icon: Icons.access_time_rounded,
            iconColor: const Color(0xFF4FC3F7),
            iconBgColor: const Color(0xFF4FC3F7).withOpacity(0.1),
            label: '时间',
            value: '$startTime 至 $endTime',  // ✅ 改为单行显示
            valueColor: const Color(0xFF333333),
          ),
        ],
      ),
    );
  }
  
  // 🔥 构建地点信息项（支持实名认证控制）
  Widget _buildLocationInfoItem(activity) {
    final isVerified = controller.isCurrentUserVerified.value;
    
    return GestureDetector(
      onTap: () {
        // 🔥 点击地点信息时，调用地图导航功能
        controller.viewMap();
      },
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Container(
            width: 28,
            height: 28,
            decoration: BoxDecoration(
              color: const Color(0xFFFF6B6B).withOpacity(0.1),
              borderRadius: BorderRadius.circular(8),
            ),
            child: const Icon(
              Icons.location_on_rounded,
              color: Color(0xFFFF6B6B),
              size: 16,
            ),
          ),
          const SizedBox(width: 8),
          Expanded(
            child: RichText(
              text: TextSpan(
                children: [
                  TextSpan(
                    text: '地点：',
                    style: TextStyle(
                      fontSize: 12,
                      color: Colors.grey[600],
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                  TextSpan(
                    text: isVerified 
                        ? (activity.activityLocation ?? '地点待定')
                        : '为了确保安全，实名认证后可见',
                    style: TextStyle(
                      fontSize: 13,
                      color: isVerified ? const Color(0xFFFF6B6B) : Colors.grey[500],
                      fontWeight: FontWeight.w600,
                      height: 1.3,
                      decoration: isVerified ? TextDecoration.underline : TextDecoration.none,
                    ),
                  ),
                ],
              ),
              maxLines: 2,
              overflow: TextOverflow.ellipsis,
            ),
          ),
          // 🔥 实名认证后显示导航图标
          if (isVerified)
            Padding(
              padding: const EdgeInsets.only(left: 8),
              child: Icon(
                Icons.navigation_rounded,
                color: const Color(0xFFFF6B6B),
                size: 18,
              ),
            ),
        ],
      ),
    );
  }

  // 🔥 通用信息项构建器
  Widget _buildInfoItem({
    required IconData icon,
    required Color iconColor,
    required Color iconBgColor,
    required String label,
    required String value,
    required Color valueColor,
  }) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Container(
          width: 28,
          height: 28,
          decoration: BoxDecoration(
            color: iconBgColor,
            borderRadius: BorderRadius.circular(8),
          ),
          child: Icon(
            icon,
            color: iconColor,
            size: 16,
          ),
        ),
        const SizedBox(width: 8),
        Expanded(
          child: RichText(
            text: TextSpan(
              children: [
                TextSpan(
                  text: '$label：',
                  style: TextStyle(
                    fontSize: 12,
                    color: Colors.grey[600],
                    fontWeight: FontWeight.w500,
                  ),
                ),
                TextSpan(
                  text: value,
                  style: TextStyle(
                    fontSize: 13,
                    color: valueColor,
                    fontWeight: FontWeight.w600,
                    height: 1.3,
                  ),
                ),
              ],
            ),
            maxLines: 2,
            overflow: TextOverflow.ellipsis,
          ),
        ),
      ],
    );
  }

  // 🔥 构建活动详情（参与人数、消费、性别）
  Widget _buildDetailSection(activity) {
    // 🔥 解析活动类型（消费）
    String cost = '待商议';
    if (activity.activityType != null && activity.activityType!.isNotEmpty) {
      cost = activity.activityType!.join(', ');
    }
    
    // 🔥 解析性别限制
    String genderLimit = '无限制';
    if (activity.activityRestriction != null && activity.activityRestriction!.isNotEmpty) {
      genderLimit = activity.activityRestriction!.join(', ');
    }
    
    return Container(
      margin: const EdgeInsets.fromLTRB(10, 6, 10, 0),
      padding: const EdgeInsets.all(10.0),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.04),
            blurRadius: 6,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              Container(
                padding: const EdgeInsets.all(5),
                decoration: BoxDecoration(
                  gradient: const LinearGradient(
                    colors: [Color(0xFFFF6B6B), Color(0xFFD84545)],
                  ),
                  borderRadius: BorderRadius.circular(8),
                ),
                child: const Icon(
                  Icons.info_outline_rounded,
                  color: Colors.white,
                  size: 14,
                ),
              ),
              const SizedBox(width: 6),
              const Text(
                '活动详情',
                style: TextStyle(
                  fontSize: 14,
                  fontWeight: FontWeight.bold,
                  color: Color(0xFF333333),
                ),
              ),
            ],
          ),
          const SizedBox(height: 10),
          // 参与人数
          _buildDetailItem(
            icon: Icons.people_rounded,
            iconColor: const Color(0xFF4CAF50),
            label: '参与人数',
            value: '${activity.currentParticipants ?? 0}/${activity.activityMaxParticipants ?? 0}人',
          ),
          const SizedBox(height: 8),
          // 消费
          _buildDetailItem(
            icon: Icons.attach_money_rounded,
            iconColor: const Color(0xFFFF9800),
            label: '消费',
            value: cost,
          ),
          const SizedBox(height: 8),
          // 性别
          _buildDetailItem(
            icon: Icons.wc_rounded,
            iconColor: const Color(0xFF9C27B0),
            label: '性别',
            value: genderLimit,
          ),
        ],
      ),
    );
  }

  // 🔥 构建详情项（带图标）- 单行紧凑显示
  Widget _buildDetailItem({
    required IconData icon,
    required Color iconColor,
    required String label,
    required String value,
  }) {
    return Row(
      children: [
        Container(
          padding: const EdgeInsets.all(5),
          decoration: BoxDecoration(
            color: iconColor.withOpacity(0.1),
            borderRadius: BorderRadius.circular(6),
          ),
          child: Icon(
            icon,
            color: iconColor,
            size: 14,
          ),
        ),
        const SizedBox(width: 6),
        Expanded(
          child: RichText(
            text: TextSpan(
              children: [
                TextSpan(
                  text: '$label：',
                  style: TextStyle(
                    fontSize: 12,
                    color: Colors.grey[600],
                    fontWeight: FontWeight.w500,
                  ),
                ),
                TextSpan(
                  text: value,
                  style: const TextStyle(
                    fontSize: 13,
                    color: Color(0xFF333333),
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ],
            ),
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
          ),
        ),
      ],
    );
  }

  // 🔥 构建详细描述
  Widget _buildDescriptionSection(activity) {
    return Container(
      margin: const EdgeInsets.fromLTRB(10, 6, 10, 0),
      padding: const EdgeInsets.all(10.0),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.04),
            blurRadius: 6,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              Container(
                padding: const EdgeInsets.all(5),
                decoration: BoxDecoration(
                  gradient: const LinearGradient(
                    colors: [Color(0xFFFF6B6B), Color(0xFFD84545)],
                  ),
                  borderRadius: BorderRadius.circular(8),
                ),
                child: const Icon(
                  Icons.description_rounded,
                  color: Colors.white,
                  size: 14,
                ),
              ),
              const SizedBox(width: 6),
              const Text(
                '详细描述',
                style: TextStyle(
                  fontSize: 14,
                  fontWeight: FontWeight.bold,
                  color: Color(0xFF333333),
                ),
              ),
            ],
          ),
          const SizedBox(height: 8),
          Container(
            width: double.infinity,
            padding: const EdgeInsets.all(10),
            decoration: BoxDecoration(
              color: const Color(0xFFF8F9FA),
              borderRadius: BorderRadius.circular(8),
            ),
            child: Text(
              activity.activityDetails ?? '暂无详细描述',
              style: TextStyle(
                fontSize: 13,
                color: Colors.grey[800],
                height: 1.4,
              ),
            ),
          ),
        ],
      ),
    );
  }

  // 构建底部操作栏
  Widget _buildBottomBar() {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.08),
            blurRadius: 20,
            offset: const Offset(0, -5),
          ),
        ],
      ),
      child: SafeArea(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 20.0, vertical: 12.0),
          child: Row(
            children: [
              // 举报按钮
              Container(
                height: 46,
                width: 46,
                decoration: BoxDecoration(
                  color: Colors.white,
                  border: Border.all(
                    color: const Color(0xFFE0E0E0),
                    width: 1.5,
                  ),
                  borderRadius: BorderRadius.circular(12),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withOpacity(0.04),
                      blurRadius: 4,
                      offset: const Offset(0, 2),
                    ),
                  ],
                ),
                child: IconButton(
                  padding: EdgeInsets.zero,
                  onPressed: controller.showReportModal,
                  icon: const Icon(
                    Icons.report_problem_outlined,
                    color: Color(0xFFFF9800),
                    size: 20,
                  ),
                ),
              ),
              const SizedBox(width: 12),
              // 加入按钮
              Expanded(
                child: Obx(() {
                  // 🔥 首先检查活动是否已过期
                  final isExpired = controller.isActivityExpired;
                  final isMyActivity = controller.isMyActivity;
                  final participantStatus = controller.participantStatus.value;
                  final isJoining = controller.isJoining.value;
                  
                  // 🎯 五种状态的按钮配置
                  String buttonText;
                  IconData buttonIcon;
                  List<Color> gradientColors;
                  Color shadowColor;
                  bool isDisabled;
                  
                  if (isExpired) {
                    // 活动已结束 - 灰色
                    buttonText = '活动已结束';
                    buttonIcon = Icons.event_busy_rounded;
                    gradientColors = [const Color(0xFF9E9E9E), const Color(0xFF757575)];
                    shadowColor = const Color(0xFF757575);
                    isDisabled = true;
                  } else if (isMyActivity) {
                    // 我发布的活动 - 蓝色
                    buttonText = '我发布的活动';
                    buttonIcon = Icons.verified_rounded;
                    gradientColors = [const Color(0xFF4FC3F7), const Color(0xFF29B6F6)];
                    shadowColor = const Color(0xFF29B6F6);
                    isDisabled = true;
                  } else if (participantStatus == '已通过') {
                    // 已通过审核 - 绿色
                    buttonText = '已加入';
                    buttonIcon = Icons.check_circle_rounded;
                    gradientColors = [const Color(0xFF66BB6A), const Color(0xFF4CAF50)];
                    shadowColor = const Color(0xFF4CAF50);
                    isDisabled = true;
                  } else if (participantStatus == '待审核') {
                    // 待审核 - 橙色
                    buttonText = '已申请加入';
                    buttonIcon = Icons.schedule_rounded;
                    gradientColors = [const Color(0xFFFF9800), const Color(0xFFF57C00)];
                    shadowColor = const Color(0xFFF57C00);
                    isDisabled = true;
                  } else {
                    // 未申请 - 红色
                    buttonText = '我要加入';
                    buttonIcon = Icons.favorite_rounded;
                    gradientColors = [const Color(0xFFFF6B6B), const Color(0xFFD84545)];
                    shadowColor = const Color(0xFFD84545);
                    isDisabled = false;
                  }
                  
                  return Container(
                    height: 46,
                    decoration: BoxDecoration(
                      gradient: LinearGradient(colors: gradientColors),
                      borderRadius: BorderRadius.circular(12),
                      boxShadow: [
                        BoxShadow(
                          color: shadowColor.withOpacity(0.3),
                          blurRadius: 8,
                          offset: const Offset(0, 2),
                        ),
                      ],
                    ),
                    child: ElevatedButton(
                      onPressed: (isJoining || isDisabled)
                          ? null
                          : controller.onJoinActivity,
                      style: ElevatedButton.styleFrom(
                        backgroundColor: Colors.transparent,
                        foregroundColor: Colors.white,
                        shadowColor: Colors.transparent,
                        elevation: 0,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(12),
                        ),
                      ),
                      child: isJoining
                          ? const SizedBox(
                              height: 20,
                              width: 20,
                              child: CircularProgressIndicator(
                                strokeWidth: 2.5,
                                valueColor: AlwaysStoppedAnimation<Color>(
                                  Colors.white,
                                ),
                              ),
                            )
                          : Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                Icon(buttonIcon, size: 20),
                                const SizedBox(width: 6),
                                Text(
                                  buttonText,
                                  style: const TextStyle(
                                    fontSize: 15,
                                    fontWeight: FontWeight.w600,
                                  ),
                                ),
                              ],
                            ),
                    ),
                  );
                }),
              ),
            ],
          ),
        ),
      ),
    );
  }

  // 🎨 构建举报弹窗 - 现代化白色主题设计
  Widget _buildReportDialog() {
    return Obx(() {
      if (!controller.showReportDialog.value) {
        return const SizedBox.shrink();
      }
      
      return Container(
        color: Colors.black.withOpacity(0.5),
        child: Center(
          child: Container(
            margin: const EdgeInsets.symmetric(horizontal: 24),
            constraints: const BoxConstraints(maxWidth: 400),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(20),
              boxShadow: [
                BoxShadow(
                  color: Colors.black.withOpacity(0.1),
                  blurRadius: 20,
                  offset: const Offset(0, 10),
                ),
              ],
            ),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                // 🎨 精致的标题区域
                Container(
                  padding: const EdgeInsets.all(20),
                  decoration: BoxDecoration(
                    color: const Color(0xFFFFF3F3),
                    borderRadius: const BorderRadius.only(
                      topLeft: Radius.circular(20),
                      topRight: Radius.circular(20),
                    ),
                  ),
                  child: Row(
                    children: [
                      // 图标
                      Container(
                        padding: const EdgeInsets.all(8),
                        decoration: BoxDecoration(
                          gradient: const LinearGradient(
                            colors: [Color(0xFFFF6B6B), Color(0xFFD84545)],
                          ),
                          borderRadius: BorderRadius.circular(12),
                        ),
                        child: const Icon(
                          Icons.report_problem_rounded,
                          color: Colors.white,
                          size: 20,
                        ),
                      ),
                      const SizedBox(width: 12),
                      // 标题
                      const Expanded(
                        child: Text(
                          '举报原因',
                          style: TextStyle(
                            fontSize: 18,
                            fontWeight: FontWeight.bold,
                            color: Color(0xFF333333),
                          ),
                        ),
                      ),
                      // 关闭按钮
                      GestureDetector(
                        onTap: controller.hideReportModal,
                        child: Container(
                          padding: const EdgeInsets.all(6),
                          decoration: BoxDecoration(
                            color: Colors.black.withOpacity(0.05),
                            borderRadius: BorderRadius.circular(8),
                          ),
                          child: const Icon(
                            Icons.close_rounded,
                            color: Color(0xFF666666),
                            size: 18,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                
                // 🎨 内容区域
                Padding(
                  padding: const EdgeInsets.all(20),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      // 输入框提示
                      Row(
                        children: [
                          Container(
                            width: 3,
                            height: 14,
                            decoration: BoxDecoration(
                              gradient: const LinearGradient(
                                colors: [Color(0xFFFF6B6B), Color(0xFFD84545)],
                              ),
                              borderRadius: BorderRadius.circular(2),
                            ),
                          ),
                          const SizedBox(width: 8),
                          const Text(
                            '详细描述',
                            style: TextStyle(
                              fontSize: 13,
                              fontWeight: FontWeight.w600,
                              color: Color(0xFF333333),
                            ),
                          ),
                        ],
                      ),
                      const SizedBox(height: 10),
                      
                      // 🎨 美化输入框
                      Container(
                        decoration: BoxDecoration(
                          color: const Color(0xFFF8F9FA),
                          borderRadius: BorderRadius.circular(12),
                          border: Border.all(
                            color: const Color(0xFFE5E7EB),
                            width: 1,
                          ),
                        ),
                        child: TextField(
                          focusNode: controller.reportInputFocusNode,  // 🔥 绑定FocusNode
                          onChanged: (value) => controller.reportReason.value = value,
                          maxLines: 3,
                          style: const TextStyle(
                            fontSize: 14,
                            color: Color(0xFF333333),
                          ),
                          decoration: InputDecoration(
                            hintText: '请详细描述举报原因...',
                            hintStyle: TextStyle(
                              fontSize: 13,
                              color: Colors.grey[400],
                            ),
                            border: InputBorder.none,
                            contentPadding: const EdgeInsets.all(12),
                          ),
                        ),
                      ),
                      const SizedBox(height: 16),
                      
                      // 预设标签提示
                      Row(
                        children: [
                          Container(
                            width: 3,
                            height: 14,
                            decoration: BoxDecoration(
                              gradient: const LinearGradient(
                                colors: [Color(0xFFFF6B6B), Color(0xFFD84545)],
                              ),
                              borderRadius: BorderRadius.circular(2),
                            ),
                          ),
                          const SizedBox(width: 8),
                          const Text(
                            '快捷选项',
                            style: TextStyle(
                              fontSize: 13,
                              fontWeight: FontWeight.w600,
                              color: Color(0xFF333333),
                            ),
                          ),
                        ],
                      ),
                      const SizedBox(height: 10),
                      
                      // 🎨 美化预设标签
                      Wrap(
                        spacing: 8,
                        runSpacing: 8,
                        children: controller.reportTags.map((tag) {
                          return Obx(() {
                            final isSelected = controller.selectedReportTag.value == tag;
                            return GestureDetector(
                              onTap: () => controller.selectReportTag(tag),
                              child: Container(
                                padding: const EdgeInsets.symmetric(
                                  horizontal: 12,
                                  vertical: 6,
                                ),
                                decoration: BoxDecoration(
                                  gradient: isSelected
                                      ? const LinearGradient(
                                          colors: [Color(0xFFFF6B6B), Color(0xFFD84545)],
                                        )
                                      : null,
                                  color: isSelected ? null : const Color(0xFFF8F9FA),
                                  borderRadius: BorderRadius.circular(16),
                                  border: Border.all(
                                    color: isSelected
                                        ? Colors.transparent
                                        : const Color(0xFFE5E7EB),
                                    width: 1,
                                  ),
                                ),
                                child: Text(
                                  tag,
                                  style: TextStyle(
                                    fontSize: 12,
                                    fontWeight: isSelected ? FontWeight.w600 : FontWeight.w500,
                                    color: isSelected ? Colors.white : const Color(0xFF666666),
                                  ),
                                ),
                              ),
                            );
                          });
                        }).toList(),
                      ),
                      const SizedBox(height: 20),
                      
                      // 🎨 美化按钮组
                      Row(
                        children: [
                          // 取消按钮
                          Expanded(
                            child: Container(
                              height: 44,
                              decoration: BoxDecoration(
                                color: const Color(0xFFF8F9FA),
                                borderRadius: BorderRadius.circular(12),
                                border: Border.all(
                                  color: const Color(0xFFE5E7EB),
                                  width: 1,
                                ),
                              ),
                              child: TextButton(
                                onPressed: controller.hideReportModal,
                                style: TextButton.styleFrom(
                                  foregroundColor: const Color(0xFF666666),
                                  shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(12),
                                  ),
                                ),
                                child: const Text(
                                  '取消',
                                  style: TextStyle(
                                    fontSize: 14,
                                    fontWeight: FontWeight.w600,
                                  ),
                                ),
                              ),
                            ),
                          ),
                          const SizedBox(width: 12),
                          
                          // 提交按钮
                          Expanded(
                            child: Obx(() {
                              final isSubmitting = controller.isSubmittingReport.value;
                              return Container(
                                height: 44,
                                decoration: BoxDecoration(
                                  gradient: const LinearGradient(
                                    colors: [Color(0xFFFF6B6B), Color(0xFFD84545)],
                                  ),
                                  borderRadius: BorderRadius.circular(12),
                                  boxShadow: [
                                    BoxShadow(
                                      color: const Color(0xFFFF6B6B).withOpacity(0.3),
                                      blurRadius: 8,
                                      offset: const Offset(0, 4),
                                    ),
                                  ],
                                ),
                                child: ElevatedButton(
                                  onPressed: isSubmitting ? null : controller.submitReport,
                                  style: ElevatedButton.styleFrom(
                                    backgroundColor: Colors.transparent,
                                    foregroundColor: Colors.white,
                                    shadowColor: Colors.transparent,
                                    elevation: 0,
                                    shape: RoundedRectangleBorder(
                                      borderRadius: BorderRadius.circular(12),
                                    ),
                                  ),
                                  child: isSubmitting
                                      ? const SizedBox(
                                          height: 20,
                                          width: 20,
                                          child: CircularProgressIndicator(
                                            strokeWidth: 2,
                                            valueColor: AlwaysStoppedAnimation<Color>(
                                              Colors.white,
                                            ),
                                          ),
                                        )
                                      : const Text(
                                          '提交举报',
                                          style: TextStyle(
                                            fontSize: 14,
                                            fontWeight: FontWeight.w600,
                                          ),
                                        ),
                                ),
                              );
                            }),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      );
    });
  }

  // 🔥 格式化日期时间
  String _formatDateTime(String? dateTimeStr) {
    if (dateTimeStr == null || dateTimeStr.isEmpty || dateTimeStr == '时间待定') {
      return '时间待定';
    }
    
    try {
      final DateTime dateTime = DateTime.parse(dateTimeStr);
      final String month = dateTime.month.toString();
      final String day = dateTime.day.toString();
      final String hour = dateTime.hour.toString().padLeft(2, '0');
      final String minute = dateTime.minute.toString().padLeft(2, '0');
      
      return '$month月$day日 $hour:$minute';
    } catch (e) {
      // 如果解析失败，返回原始字符串
      return dateTimeStr;
    }
  }

  @override
  Widget build(BuildContext context) {
    return GetBuilder<ActivityDetialController>(
      init: ActivityDetialController(),
      id: "activity_detial",
      builder: (_) {
        return Scaffold(
          backgroundColor: const Color(0xFFF8F9FA), // 🔥 更浅的灰色背景
          appBar: AppBar(
            elevation: 0,
            backgroundColor: Colors.white,
            title: const Text(
              "活动详情",
              style: TextStyle(
                color: Color(0xFF333333),
                fontWeight: FontWeight.w600,
              ),
            ),
            leading: IconButton(
              icon: const Icon(
                Icons.arrow_back_ios_rounded,
                color: Color(0xFF333333),
              ),
              onPressed: controller.goBack,
            ),
            actions: [
              // 🔥 微信分享按钮
              IconButton(
                icon: Image.asset(
                  AssetsImages.sharePng,
                  width: 24,
                  height: 24,
                  color: const Color(0xFF333333),
                ),
                onPressed: controller.shareActivity,
                tooltip: '分享',
              ),
            ],
          ),
          body: Stack(
            children: [
              // 主内容
              Obx(() => _buildView()),
              
              // 举报弹窗
              _buildReportDialog(),
            ],
          ),
          // 底部操作栏
          bottomNavigationBar: Obx(() {
            if (controller.isLoading.value || controller.activity == null) {
              return const SizedBox.shrink();
            }
            return _buildBottomBar();
          }),
        );
      },
    );
  }
}
